import { useProjectInUrl } from "screens/kanban/util";
import { Row, ScreenContainer } from "components/lib";
import { Button, List, Modal, Spin } from "antd";
import { useState } from "react";
import { EpicModal } from './epic-modal';
import { useDocumentTitle } from "utils";
import { useDeleteEpic, useEpics } from "utils/epic";
import dayjs from "dayjs";
import { Epic } from "type/epic";
import { useEpicQueryKey } from "./util";
import { useTask } from "utils/task";
import { Link } from "react-router-dom";

export const EpicScreen = () => {
  useDocumentTitle('任务组列表');

  const [epicModalOpen, setModalOpen] = useState(false)
  const { data: project } = useProjectInUrl();
  const { data: epics, isLoading } = useEpics({ projectId: project?.id });
  const { mutateAsync: deleteEpic } = useDeleteEpic(useEpicQueryKey());
  const { data: tasks } = useTask({ projectId: project?.id })

  const close = () => {
    setModalOpen(false)
  }

  const open = () => {
    setModalOpen(true);
  }

  const confirmDeleteEpic = (epic: Epic) => {
    Modal.confirm({
      title: `确定删除项目组：${epic.name}`,
      content: "点击确定删除",
      okText: "确定",
      onOk() {
        deleteEpic({ id: epic.id });
      }
    })
  }

  return (
    <ScreenContainer>
      <Row between={true}>
        <h1>{project?.name}任务组</h1>
        <Button type={'link'} onClick={open}>创建任务组</Button>
      </Row>
      {
        isLoading ?
          <Spin size="large" /> :
          <List
            style={{ overflow: 'scroll' }}
            itemLayout="vertical"
            dataSource={epics}
            renderItem={epic => (
              <List.Item>
                <List.Item.Meta
                  title={
                    <Row between={true}>
                      <span>{epic.name}</span>
                      <Button onClick={() => confirmDeleteEpic(epic)} type={"link"}>
                        删除
                      </Button>
                    </Row>
                  }
                  description={
                    <div>
                      <div>开始时间：{dayjs(epic.start).format("YYYY-MM-DD")}</div>
                      <div>结束时间：{dayjs(epic.end).format("YYYY-MM-DD")}</div>
                    </div>
                  }
                />
                <div>
                  {
                    tasks ?
                      tasks.filter((task) => task.epicId === epic.id)
                        .map((task) => (
                          <div>
                            <Link
                              key={task.id}
                              to={`/projects/${project?.id}/kanban?editingTaskId=${task.id}`}
                            >
                              {task.name}
                            </Link>
                          </div>
                        ))
                      :
                      null
                  }
                </div>
              </List.Item>
            )} >
          </List>
      }

      <EpicModal visible={epicModalOpen} onClose={close} />
    </ScreenContainer>
  )
};
